<%@page import="com.jusu.biz.IShopBiz"%>
<%@page import="com.jusu.biz.ShopBizImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
	IShopBiz shopBiz = new ShopBizImpl();
	int[] widthArr = shopBiz.showAllWidthNode();
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>选轮毂</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport" content="width=750, minimum-scale=0.4, target-densitydpi=device-dpi,user-scalable=no,">
    <link rel="stylesheet" type="text/css" href="css/m.jui.css" />
    <link rel="stylesheet" type="text/css" href="css/all.css" />
</head>
<body ms-controller="classify" >
    <div class="jui-flexview">
        <header class="jui-bar">
            <p class="adress fl">郑州<span class="iconfont">&#xe622;</span></p>
            <div class="bar-find fl">
                <span class=" iconfont fl">&#xe623;</span>
                <input class="fl myInput" type="search" name="" required="" placeholder="Search" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="zh-CN">
            </div>
            <p class="iconfont fr">&#xe671;<span></span></p>
        </header>
        <!--头部结束-->
        <div class="mall_classify">
            <ul class="clearfix" style="width: 100%;">
            	<li id="J_Address2">车型<span class="iconfont">&#xe622;</span></li>
                <li>销量</li>
                <li id="price">价格<div class="topup"><p class="iconfont">&#xe66b;</p><p class="iconfont">&#xe756;</p></div></li>
                <li class="change" id="pinpai"><i>特殊</i><span class="iconfont">&#xe622;</span></li>               
            </ul>
            <div class="_select_list">
            	<p>宽度(J值)</p>
            	<p>尺寸</p>
            	<p>工艺</p>
            </div>
        </div>
        <!--分类结束-->    	
        <div class="jui-scrollview">
            <div class="mall_classlist">
                <div class="classlist_item">
                    <img src="img/img.jpg" />
                    <div class="item_text">
                        <p class="itemtit">美国正品VOSSEN CV1 适合宝马5系  6系 7系</p>
                        <p class="itemprice"><span>¥</span>13999<span>(售价)</span></p>
                        <p class="Rentalprice"><span>首租价:</span><span>¥</span>499<span>/月</span></p>
                        <img src="img/mall_ico_03.png" class="appointment" />
                    </div>
                </div>
                <div class="classlist_item">
                    <img src="img/img.jpg" />
                    <div class="item_text">
                        <p class="itemtit">美国正品VOSSEN CV1 适合宝马5系  6系 7系</p>
                        <p class="itemprice"><span>¥</span>13999<span>(售价)</span></p>
                        <p class="Rentalprice"><span>首租价:</span><span>¥</span>499<span>/月</span></p>
                        <img src="img/mall_ico_03.png" class="appointment" />
                    </div>
                </div>
                <div class="classlist_item">
                    <img src="img/img.jpg" />
                    <div class="item_text">
                        <p class="itemtit">美国正品VOSSEN CV1 适合宝马5系  6系 7系</p>
                        <p class="itemprice"><span>¥</span>13999<span>(售价)</span></p>
                        <p class="Rentalprice"><span>首租价:</span><span>¥</span>499<span>/月</span></p>
                        <img src="img/mall_ico_03.png" class="appointment" />
                    </div>
                </div>
                <div class="classlist_item">
                    <img src="img/img.jpg" />
                    <div class="item_text">
                        <p class="itemtit">美国正品VOSSEN CV1 适合宝马5系  6系 7系</p>
                        <p class="itemprice"><span>¥</span>13999<span>(售价)</span></p>
                        <p class="Rentalprice"><span>首租价:</span><span>¥</span>499<span>/月</span></p>
                        <img src="img/mall_ico_03.png" class="appointment" />
                    </div>
                </div>
                <div class="classlist_item">
                    <img src="img/img.jpg" />
                    <div class="item_text">
                        <p class="itemtit">美国正品VOSSEN CV1 适合宝马5系  6系 7系</p>
                        <p class="itemprice"><span>¥</span>13999<span>(售价)</span></p>
                        <p class="Rentalprice"><span>首租价:</span><span>¥</span>499<span>/月</span></p>
                        <img src="img/mall_ico_03.png" class="appointment" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="classify_brand">
    	<ul class="brand_list clearfix">
    		<%
    			for(int i=0;i<widthArr.length;i++){
    				%>
    					<li class="spl"><haha><%=widthArr[i] %></haha><span class="fr iconfont">&#xe645;</span></li>
    				<%
    			}
    		%>
    		<input type="hidden" id="width" name="width" value="0">
    	</ul>
    	<a href="list.jsp" class="align_btn">重置</a>
    	<a  onclick="widAjax()" class="sure_btn">确定</a>
    </div>
    <div class="classify_brand">
    	<ul class="brand_list clearfix">
    		<li class="change">品牌 <span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    	</ul>
    	<a href="" class="align_btn">重置</a>
    	<a href="" class="sure_btn">确定</a>
    </div>
    <div class="classify_brand">
    	<ul class="brand_list clearfix">
    		<li class="change">品牌 <span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    		<li>品牌<span class="fr iconfont">&#xe645;</span></li>
    	</ul>
    	<a href="list.jsp" class="align_btn">重置</a>
    	<a href="DoShop" class="sure_btn">确定</a>
    </div>    
    <div class="black_bard"></div>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/m.jui.js"></script>

    <script src="js/juicity.js" type="text/javascript"></script>
    <script src="js/m.juiall.js" type="text/javascript"></script>
    <script>
        !function () {
            var $target = $('#J_Address2');
            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
                $('.classify_brand').removeClass('brouce-in')
                $('.black_bard').hide();
            });
            
            $('#pinpai').click(function () {
                $('._select_list').toggle()
            })
            $('._select_list p').click(function () {
                var index = $(this).index()
                $('.classify_brand').eq(index).addClass('brouce-in').siblings('').removeClass('brouce-in')
                var text = $(this).text()
                $('.black_bard').show()
                $(this).parent().hide()
                $('#pinpai i').text(text)
            })
            $('.mall_classify li').click(function () {
                $(this).addClass('change').siblings().removeClass('change')
                $('.classify_brand').removeClass('brouce-in')
                $('.black_bard').hide();
                $('.mall_classify li').not('#pinpai').click(function () {
                    $('._select_list').hide();
                    
                })
            })
            $('.black_bard').click(function () {
                $('.classify_brand').removeClass('brouce-in')
                $(this).hide();
            })
            $(".sure_btn").click(function () {
                $('.classify_brand').removeClass('brouce-in')
                $('.black_bard').hide();
            });
            $(".align_btn").click(function () {
                model.tv = "";
                init();
                $('.classify_brand').removeClass('brouce-in')
                $('.black_bard').hide();
            });
        }();

        var lis = document.getElementsByClassName("brand_list")[0].getElementsByTagName("li");
        var widInp = document.getElementById("width");
        for(var i =0;i<lis.length;i++){
        	lis[i].index = i;
        	lis[i].onclick = function(){
        		for(var j=0;j<lis.length;j++){
        			lis[j].setAttribute("class","");
        		}
        		this.setAttribute("class","change");
        		widInp.value = this.getElementsByTagName('haha')[0].innerHTML;
        	}
        }
        
        function widAjax(){
        	var wid = widInp.value;
        	$.ajax({
        		url:'DoShop',
        		type:'POST',
        		data:'width=' + wid,
        		dataType:'text',
        		success:function(){
        		}
        	})
        	
        }
    </script>
</body>
</html>
